<template>
  <i :class="iconClass" :style="{ width: width, height: height }"></i>
</template>

<script setup lang="ts">
/**
 * 定义类型
 * name: 图标名称
 * prefix: 图标前缀
 * width: 图标宽度
 * height: 图标高度
 * customClass: 自定义样式
 */
interface Props {
  name: string;
  prefix?: string;
  width?: string;
  height?: string;
  customClass?: string;
}

/**
 * 定义默认值
 * prefix: 'svg'
 * width: '16px'
 * height: '16px'
 * customClass: ''
 */
const props = withDefaults(defineProps<Props>(), {
  prefix: "svg",
  width: "16px",
  height: "16px",
  customClass: "",
});

/**
 * 计算属性
 * iconClass: 图标类名
 */
const iconClass = computed(() => {
  return [`i-${props.prefix}:${props.name}`, props.customClass];
});
</script>

<style scoped lang="scss"></style>
